/* latin-ext */
@font-face {
    font-family: 'Sniglet';
    font-style: normal;
    font-weight: 400;
    src: local('Sniglet Regular'), local('Sniglet-Regular'), url(../fonts/QFfF4hdc6zH3bFXty8pkgPY6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
    unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Sniglet';
    font-style: normal;
    font-weight: 400;
    src: local('Sniglet Regular'), local('Sniglet-Regular'), url(../fonts/lHhyjBgrvbE7Y_C6XNlBow.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/*basic reset*/
* {margin: 0; padding: 0; box-sizing: border-box;}

body {
    padding-top: 25px;
    /*background: hsl(120, 40%, 40%);*/
    font-family: Sniglet;
    height:400px;
}
main {
    width: 470px; margin: 0 auto; padding-bottom: 10px;
    background: white; border-radius: 3px; overflow: hidden;
}
h1 {
    font-size: 24px; font-weight: normal;
    background: hsl(120, 40%, 95%); color: hsl(120, 40%, 40%);
    text-align: center;
    margin-top:0;
    padding: 20px 0; margin-bottom: 40px;
}

.flp {padding: 0 50px;}
/*Let's place the label over the input*/
.flp div {position: relative; margin-bottom: 30px;}

.flp input, .flp label {
    width: 400px; display: block;
    font: inherit; font-size: 16px; line-height: 24px;
    /*fixed height for FF line height issue.
    height = 24(lineheight) + 10*2(padding) + 2(border)*/
    height: 46px;
    border: 1px solid #999;
}
.flp input {padding: 10px; outline: none; border-radius: 3px;}
.flp label {
    position: absolute; left: 0; top: 0;
    /*left/right padding will be 2px less, adjusted by padding on .ch*/
    padding: 10px 8px;
    border-color: transparent; color: #666;
    cursor: text;
}

/*label styles*/
.ch {
    display: block; float: left;
    position: relative; /*for upward animation*/
    background: white;
}
.ch:first-child {padding-left: 2px;}
.ch:last-child {padding-right: 2px;}

/*active input label*/
.focussed {
    /*when any input is already focussed clicking on it(label) again won't do anything*/
    pointer-events: none;
}
.login-btn {
    text-align:center;
}
.login-btn button{
    width:130px;
    margin: 0 10px;
    height:37px;
}
.tip {
    text-align:center;
    background-color:hsl(120, 40%, 95%);
    border-top:hsl(120, 40%, 40%) solid 1px;
    border-bottom:hsl(120, 40%, 40%) solid 1px;
    color:hsl(120, 40%, 40%);
    padding:5px 0;
    font-family: 微软雅黑, 宋体, Arial, Helvetica, sans-serif;
    display:none;
}
.login-err {
    color:#CF682F;
}
.login-success {
    color:hsl(120, 40%, 40%);
}

.register {
    margin-top:15px;
    border-top:hsl(120, 40%, 40%) datted 1px;
    text-align:center;
}
.register p {
    margin:0;
}
.btn-register {
    font-family: 微软雅黑, 宋体, Arial, Helvetica, sans-serif;
    color:#000;
}
.btn-register:hover {
    text-decoration: none;
}
